<!-- userinfo -->
<template>
  <div class="userinfo">
    <pop-stepper :tips="tips" :acttips="'基础信息'">
      <div class="flex align-center m-t-1">
        <span class="nowarp">用户名：</span>
        <el-input
          class="flex-1"
          v-model="addObj.userName"
          placeholder="请输入内容"
        ></el-input>
      </div>
      <div class="flex align-center m-t-1">
        <span class="nowarp">手机号码：</span>
        <el-input
          class="flex-1"
          v-model="addObj.userName"
          placeholder="请输入内容"
        ></el-input>
      </div>
      <div class="flex align-center m-t-1">
        <span class="nowarp">登录密码：</span>
        <el-input
          class="flex-1"
          v-model="addObj.userName"
          placeholder="请输入内容"
        ></el-input>
      </div>
      <div class="flex align-center m-t-1">
        <span>用户身份：</span>
        <el-select v-model="addObj.RoleId" placeholder="请选择">
          <el-option
            class="flex-1"
            v-for="item in idOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="flex align-center m-t-1">
        <span>所属分公司：</span>
        <el-select v-model="addObj.OrgId" placeholder="请选择" class="flex-1">
          <el-option
            v-for="item in comOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="flex align-center m-t-1">
        <span>直属上级：</span>
        <el-input
          class="flex-1"
          v-model="addObj.userName"
          placeholder="请输入内容"
        ></el-input>
      </div>
    </pop-stepper>
  </div>
</template>

<script>
import { addUser } from '@/api/system/user'
import popStepper from '@/components/popupStepper'

export default {
  //import引入的组件需要注入到对象中才能使用
  name: 'userinfo',
  components: { popStepper },
  props: {
    addObj: {
      type: Object,
      default: function () {
        return {}
      }
    },
    comOptions: {
      type: Array,
      default: function () {
        return []
      }
    },
    idOptions: {
      type: Array,
      default: function () {
        return []
      }
    },
  },
  data () {
    //这里存放数据
    return {
      tips: [
        {
          name: '基础信息',
          active: false,
          icon: 'el-icon-user'
        }
      ],

    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {

  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () { }, //生命周期 - 创建之前
  beforeMount () { }, //生命周期 - 挂载之前
  beforeUpdate () { }, //生命周期 - 更新之前
  updated () { }, //生命周期 - 更新之后
  beforeDestroy () { }, //生命周期 - 销毁之前
  destroyed () { }, //生命周期 - 销毁完成
  activated () { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
//@import url(); 引入公共css类
<style  scoped>
.userinfo div > .flex > span {
  width: 20%;
  text-align: justify;
  text-align-last: justify;
}
</style>
